<template>
  <div class="item1">
    <el-dialog :visible.sync="visible">
      <div class="item-container">
        <div class="panelWrap item-content">
          <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
            <div>{{ isEdit ? '修改维保条目' : '添加维保条目' }}</div>
            <i class="el-icon-close" @click="handleCloseDialog" />
          </div>
          <div class="item-main flex flexdc flexcenter">
            <div class="main-cont">
              <div class="entryName m-b-20">
                <span class="name"><span class="mustval">*</span>条目名称：</span>
                <el-input v-model="form.name" class="entry-input co-input" placeholder="请输入条目名称" />
              </div>
              <div class="demand m-b-20">
                <span class="name"><span class="mustval">*</span>维保要求：</span>
                <el-input v-model="form.content" class="co-input" placeholder="请输入维保需求" />
              </div>
              <div class="maType m-b-20">
                <span class="name"><span class="mustval">*</span>维保类型：</span>
                <el-select v-model="form.type" placeholder="请选择维保类型" class="co-input">
                  <el-option
                    v-for="item in typeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
              <div class="category">
                <span class="name"><span class="mustval">*</span>用户设备类别：</span>
                <el-select v-model="form.devicesType" placeholder="请选择用户设备类别" class="co-input">
                  <el-option
                    v-for="item in catOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
            </div>

            <div class="flex footer m-t-70">
              <el-button v-if="!isEdit" class="saveBtn m-r-30 btn el-icon-circle-check" @click="handleSave(0)">保 存</el-button>
              <el-button v-else type="success" class="m-r-30 btn el-icon-circle-check" @click="handleSave(1)">更 新</el-button>
              <el-button class="clsoeBtn btn el-icon-circle-close" @click="handleCloseDialog">关 闭</el-button>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import { miItemAdd, miItemUpdate } from '@/api/maintenance/item'
import { fetchTypeList } from '@/api/elevator/elevatorType'
import { showNotice } from '@/utils/toolclass'

export default {
  components: {},
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    value: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      visible: false,
      typeOptions: [
        {
          value: '1',
          label: '按需维保'
        },
        {
          value: '2',
          label: '季度维保'
        },
        {
          value: '3',
          label: '半年维保'
        }
      ],
      catOptions: [],
      form: { ...this.data },
      formOrigin: {
        id: 0,
        name: '',
        content: '',
        crtDate: '',
        crtOpr: '',
        deleteState: '',
        devicesType: 9,
        lstEdtDate: '',
        lstEdtOpr: '',
        orgId: '',
        price: '',
        type: '1',
        version: null
      },
      paging: {
        currentPage: 1,
        pageSize: 10,
        pageSizeArr: [10, 20, 50, 100],
        total: 0
      },
      param: {
        id: '',
        name: ''
      }
    }
  },
  watch: {
    visible(v) {
      this.$emit('input', v)
    },
    value(v) {
      this.visible = v
    },
    data(v) {
      if (v.id === 0) {
        this.form = { ...this.formOrigin }
      } else {
        this.form = { ...v }
      }
    }
  },
  created() {},
  mounted() {
    this.getEleTypeList()
  },
  methods: {
    getEleTypeList() {
      fetchTypeList(this.param.id, this.param.name, this.paging.currentPage, this.paging.pageSize).then(res => {
        // console.log(res)
        if (res.code === '000000') {
          this.catOptions = res.data.map((item, i) => {
            const items = {
              value: i + 1,
              label: item.name
            }
            return items
          })
          // console.log(this.catOptions)
        }
      })
    },
    handleSave(info) {
      if (!(/^\S+$/.test(this.form.name))) {
        showNotice('error', '提示', '请输入条目名称')
        return
      }
      if (!(/^\S+$/.test(this.form.content))) {
        showNotice('error', '提示', '请输入条目名称')
        return
      }

      const params = {
        id: this.form.id,
        name: this.form.name,
        content: this.form.content,
        // crtDate: formatDateTime().ymdhm,
        crtDate: this.form.crtDate,
        crtOpr: this.form.crtOpr,
        deleteState: this.form.deleteState,
        devicesType: this.form.devicesType,
        lstEdtDate: this.form.lstEdtDate,
        lstEdtOpr: this.form.lstEdtOpr,
        orgId: this.form.orgId,
        price: this.form.price,
        type: this.form.type === '按需维保' ? 1 : this.form.type === '季度维保' ? 2 : 3,
        version: this.form.version
      }
      // console.log(params, this.form.type)
      if (info === 0) {
        this.handleSubmitAdd(params)
      } else {
        this.handleSubmitUpdate(params)
      }
    },
    handleSubmitAdd(data) {
      miItemAdd(data).then(res => {
        if (res.code === '000000') {
          showNotice('success', '提示', '保存成功')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
        } else {
          if (res.msg === '失败') {
            showNotice('error', '提示', '保存失败')
          } else {
            showNotice('error', '提示', res.msg)
          }
        }
      })
    },
    handleSubmitUpdate(data) {
      miItemUpdate(data).then(res => {
        if (res.code === '000000') {
          showNotice('success', '提示', '更新成功')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
        } else {
          if (res.msg === '失败') {
            showNotice('error', '提示', '更新失败')
          } else {
            showNotice('error', '提示', res.msg)
          }
        }
      })
    },
    handleCloseDialog() {
      this.visible = !this.visible
    }
  }
}
</script>

<style rel='stylesheet/scss' lang='scss'>
@import "@/styles/public.scss";
.item1 {
  .item-container {
    width: 800px;
    background: #ffffff;
    margin-left: -200px;
    margin-top: 200px;
    border-radius: 5px;
    .item-content {
      .item-main {
        min-height: 400px;
        .category {
          margin-left: -28px;
        }
      }
    }
    .footer {
      .btn {
        height: 40px;
      }
    }
  }
}
</style>
